import React, { memo, useState, useRef, useCallback } from "react";
import PropTypes from "prop-types"

import { Carousel } from "antd";
import {
  TopBannerControl,
  TopBannerLeft,
  TopBannerRight,
  TopBannerWrapper,
} from "./style";

const TopBanner = memo((props) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const { topBanners } = props;

  // 轮播图点击事件
  const bannerRef = useRef();
  const bannerChange = useCallback((to, from) => {
      setCurrentIndex(to);
  },[]);
  const bgImage = topBanners[currentIndex]?.imageUrl + "?imageView&blur=40x20";

  return (
    <TopBannerWrapper bgImage={bgImage}>
      <div className="banner wrap-v2">
        <TopBannerLeft>
          <Carousel effect="fade" ref={bannerRef} beforeChange={bannerChange}>
            {topBanners.map((item, index) => {
              return (
                <div className="banner-item" key={item.imageUrl}>
                  <img className="image" src={item.imageUrl} alt="" />
                </div>
              );
            })}
          </Carousel>
        </TopBannerLeft>
        <TopBannerRight></TopBannerRight>
        <TopBannerControl>
          <button
            className="btn left"
            onClick={(e) => bannerRef.current.prev()}
          ></button>
          <button
            className="btn right"
            onClick={(e) => bannerRef.current.next()}
          ></button>
        </TopBannerControl>
      </div>
    </TopBannerWrapper>
  );
});

TopBanner.propTypes = {
  topBanners: PropTypes.array
}

export default TopBanner;
